<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
    <script src="./jquery-1.9.1.js" type="text/javascript"></script>
    <script type="text/javascript" src="./socket.io/socket.io.js"></script>

    <style>
        body {   padding:20px;}
        #console {  overflow:auto;}
        .username-msg {color:orange;}
        .connect-msg {color:green;}
        .disconnect-msg {color:red;}
        .send-msg {color:#888}
    </style>

</head>

<body>

<h1>Netty-socketio Demo Chat</h1>

<br/>

<div id="console" class="well">
</div>
消息总数：<div id="msgnum">0</di>
</body>



<script type="text/javascript">
    var socket =  io.connect('http://localhost:9092/msg_1111');

    socket.on('connect', function() {
        output('<span class="connect-msg">Client has connected to the server!</span>');
    });

    socket.on('message', function(data) {//收到消息后，将消息总数加一
        var num = $("#msgnum").html();
        num = parseInt(num) + data;
        $("#msgnum").html(num);
    });

    socket.on('disconnect', function() {
        output('<span class="disconnect-msg">The client has disconnected!</span>');
    });
    function sendDisconnect() {
        socket.disconnect();
    }

    function output(message) {
        var currentTime = "<span class='time'>" +  new Date() + "</span>";
        var element = $("<div>" + currentTime + " " + message + "</div>");
        $('#console').prepend(element);
    }

</script>
</html>